<template>
  <div class="Calender">
      <div class="index-calendar">
        <el-calendar v-model="value">
        <template slot="dateCell" slot-scope="{ date, data }">
            <p
            :class="estState(date)"
            @click="clickCale(date)"
            @dblclick="dbHoli($event)"
            >
            <!-- {{ data.day.split('-').slice(2).join('-') }} -->
            {{ getDay(date) }}
            </p>
        </template>
        </el-calendar>
    </div>
    <div class="rlExplain">
        <p><i class="blueCircle"></i>蓝色代表可派工(单击)</p>
        <p><i class="redCircle"></i>红色代表请假(双击)</p>
        <p><i class="grayCircle"></i>灰色代表周末</p>
    </div>
  </div>
</template>

<script>
export default {
    name:'Calendar',
    data(){
        return{
            value: new Date(),
            //日历激活状态
            stateCalendar: 1, //1蓝色 或者 不选中 2红色休假 红色底白字 3灰色底
            holiday: false, //是否休假
        }
    },
    methods:{
        //日历 标注今天日期
        getDay(data) {
        return data.getDate();
        },
        //日历 初始化周末为灰色底 是否休假
        estState(date) {
        // console.log(date.getDay());
        if (date.getDay() === 6 || date.getDay() === 0) {
            // console.log('bg-week');
            return "bg-week";
        }
        if (this.holiday === true) {
            return "bg-holiday";
        }
        },
        //日历 单击日历选中状态
        clickCale(date) {
        if (date.getDay() === 6 || date.getDay() === 0) {
            this.stateCalendar === 1;
        }
        },
        //日历 双击日历改为休假状态
        dbHoli(e) {
        e.target.classList.toggle("bg-holiday");
        console.log(e.target.classList);
        },
    },
}
</script>

<style scoped>
/* 日历 样式 */
.index-calendar {
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  padding: 0 20px;
}
.rlExplain {
  font-size: 12px;
  margin-top: 15px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0 0;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-week {
  background-color: #f2f2f2;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-holiday {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
/* 日历 end*/
</style>